<template>
  <view class="search">
    <view :class="{ 'clear-right-space': showSuffixBtn }" class="search-value">
      <!-- 前置icon -->
      <view v-if="prefix" class="search-icon">
        <slot name="prefix">
          <image :src="img_url + 'ic_ss.png'" />
        </slot>
      </view>

      <input
        class="search-content text-ellipsis"
        type="search"
        ref="inputField"
        :value="value"
        :placeholder="placeholder"
        @input="fieldInput"
        @change="fieldChange"
        @focus="fieldFocus"
        @blur="fileldBlur"
      />

      <view @tap="clearIconClick" v-if="clear" class="search-icon clear-icon">
        <slot name="closeCircle">
          <image v-show="isClearIconShow" :src="img_url + 'clear.png'" />
        </slot>
      </view>

      <!-- 后置icon -->
      <view v-if="suffix" class="search-icon">
        <slot name="suffix">
          <image :src="img_url + 'ic_ss.png'" />
        </slot>
      </view>
    </view>

    <view class="suffix-btn" v-if="showSuffixBtn">
      <slot name="suffixBtn">
        <view @tap="suffixBtnClick" :style="{ color: suffixBtnColor }">
          {{ suffixBtnText }}
        </view>
      </slot>
    </view>
  </view>
</template>

<script>
/* 

   props: {

   }

   events: {
    suffixBtnClick // 右侧（搜索）按钮点击
    change   // input值发生变化
    cleared  // 清空按钮点击
   }


   slots: {
    prefix   // 前置icon
    suffix   // 后置icon
    suffixBtn  // （搜索）按钮
    closeCircle
   }

*/
export default {
  name: 'MySearchInput',

  props: {
    value: {
      type: [String, Number],
      default: '',
    },

    placeholder: {
      type: String,
      default: '请输入',
    },

    suffix: {
      // 后置icon
      type: Boolean,
      default: false,
    },

    prefix: {
      // 前置icon
      type: Boolean,
      default: true,
    },

    // 设置显示清除按钮， 需要手动接收 cleared 事件 置空绑定的值
    clear: {
      type: Boolean,
      default: true,
    },

    showSuffixBtn: {
      type: Boolean,
      default: true,
    },

    suffixBtnText: {
      type: String,
      default: '搜索',
    },

    suffixBtnColor: {
      type: String,
      default: '#42A5F5',
    },
  },

  data() {
    return {
      img_url: this.$GLOBAL.BASE_IMG,
      isClearIconShow: false,
    };
  },

  methods: {
    fieldInput(e) {
      const {
        target: { value },
      } = e;

      if (value) {
        if (!this.isClearIconShow) {
          this.isClearIconShow = true;
        }
      }

      this.$emit('input', value);
      this.valueChange(value);
    },

    fieldChange(e) {
      const {
        target: { value },
      } = e;

      this.$emit('change', value);
      this.valueChange(value);
    },

    fieldFocus() {
      if (this.value) {
        this.isClearIconShow = true;
      }
    },

    fileldBlur() {
      this.isClearIconShow = false;
    },

    clearIconClick() {
      // 直接触发无效 ？ (uni-app 微信中根本不兴这个...)
      this.$nextTick(this.valueChange('ns'));

      this.$emit('cleared');
    },

    valueChange(value) {
      // 不兴这个...
      this.$emit('update:value', value);
    },

    suffixBtnClick() {
      this.$emit('suffixBtnClick');
    },
  },

  // 不兴这个...
  model: {
    prop: 'value',
    event: 'update:value',
  },
};
</script>

<style lang="scss" scoped>
.text-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.search {
  width: 100%;
  height: 88upx;
  background: rgba(255, 255, 255, 1);
  position: relative;
  display: flex;
  align-items: center;
  .search-value {
    flex: 1;
    height: 60upx;
    background: rgba(245, 246, 246, 1);
    border-radius: 8upx;
    // border-radius: 32upx;
    margin: 14upx 30upx;
    font-size: 26upx;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 37upx;
    padding-left: 8upx;
    overflow: hidden;
    display: flex;
    align-items: center;

    &.clear-right-space {
      margin-right: 0;
    }

    .search-content {
      height: 100%;
      flex: 1;
      padding: 0 12upx;
    }
  }

  .search-icon {
    width: 32upx;
    height: 32upx;
    display: block;
    z-index: 20;
    position: relative;
    display: flex;
    align-items: center;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .clear-icon {
    width: 24upx;
    height: 24upx;
    margin-right: 12upx;
  }

  .suffix-btn {
    margin: 0 12upx;
  }
}
</style>
